<template>
  <div>
    <!-- 列表 -->
    <DataTable 
    v-loading="listLoading"
    :list="listData" :fields="fields" :permissions="{}" children="childMenus">
      <template slot="buttonSlot" slot-scope="scope">
          <el-tooltip v-if="$store.state.permissions.delete" content="强制下线" class="operatingButton">
          <el-popconfirm
            title="是否确认该用户强制下线？"
            confirm-button-text="是"
            cancel-button-text="否"
            @confirm="del(scope.row.token)"
          >
            <el-link
              type="danger"
              icon="el-icon-error"
              :underline="false"
              slot="reference"
            >强制下线</el-link>
          </el-popconfirm>
        </el-tooltip>
      </template>
    </DataTable>


  </div>
</template>
<script>

export default {
  name: "Menu",
  components: { },
  data() {
    return {
      // 表单标题
      title: "",
      // 表单显示状态
      visible: false,
      // 提交按钮加载状态
      confirmLoading: false,
      // 图标选择器显示状态
      iconSelectorDisplay: false,
      // 列表字段
      fields: [
        {
          label: "用户名",
          value: "userName",
        },
        {
          label: "昵称",
          value: "nickName",
        },
        {
          label: "最后登录时间",
          value: "lastLoginTime",
        },
        {
          label: "最后登录ip",
          value: "lastLoginIp",
        },
        {
          label: "最后登录地",
          value: "ipAddress",
        }
      ],
      // 列表数据
      listData: [],
      // 列表数据loading开关
      listLoading: false,

      // 表单参数
      form: {},
    };
  },
mounted() {
    this.getList();
  },
  methods: {
    //强制下线单个用户
    del(token){
      this.$api.online.downline({token: token}).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.getList();
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    // 获取列表
    getList() {
      this.listLoading = true;
      this.$api.online.getOnlineUsers().then((res) => {
        if (res.code == 200) {
          this.listData = res.data;
        } else {
          this.$message.error(res.msg);
        }
        this.listLoading = false;
      });
    }
  },
};
</script>

<style lang="less" scoped>
.headerBtn {
  margin-right: 10px;
}

.menuTitle {
  margin: 30px 0 0 0;
  text-align: center;
  border-bottom: 1px solid #ccc;
}
</style>